<div ng-controller="SignupController">
    <div class="page-header">
        <h1>
            {{'signupforfree'|translate}}
        </h1>
    </div>
    <form name="form" class="form form-horizontal" ng-submit="signup()" novalidate>
        <div class="form-group" ng-class="{'has-error':form.username.$invalid && !form.username.$pristine}">
            <label class="control-label col-md-3" for="username">{{'username'|translate}}</label>
            <div class="col-md-6">
                <input class="form-control" id="username" name="username"
                       ng-model="newUser.username" ng-required="true" ng-minlength="6" ng-maxlength="20" username-validator ng-model-options="{ debounce: 500 }"/>
                <div class="help-block" ng-messages="form.username.$error" ng-if="!form.username.$pristine">
                    <div ng-messages-include="messages.html"></div>
                    <p ng-message="username">Username is taken.</p>
                </div>
                <div class="help-block" ng-if="form.username.$pending">Checking username available.</div>
            </div>
        </div>
        <div class="form-group" ng-class="{'has-error':form.password.$invalid && !form.password.$pristine}">
            <label for="password" class="control-label col-md-3">{{'password'|translate}}</label>
            <div class="col-md-6">
                <input class="form-control" type="password" id="password" name="password"
                       ng-model="newUser.password" ng-required="true" ng-minlength="6" ng-maxlength="20"/>
                <div class="help-block" ng-messages="form.password.$error"  ng-if="!form.password.$pristine">
                    <div ng-messages-include="messages.html"></div>
                </div>
            </div>
        </div>
        <div class="form-group" ng-class="{'has-error':form.email.$invalid && !form.email.$pristine}">
            <label class="control-label col-md-3" for="email">{{'email'|translate}}</label>
            <div class="col-md-6">
                <input class="form-control" type="email" id="email" name="email" maxlength="100"
                       ng-model="newUser.email" ng-required="true" />
                <div class="help-block" ng-messages="form.email.$error" ng-if="!form.email.$pristine">    
                    <div ng-messages-include="messages.html"></div>
                </div>
            </div>
        </div>
        <div class="form-group" ng-class="{'has-error':form.name.$invalid && !form.name.$pristine}">
            <label class="control-label col-md-3" for="name">{{'displayName'|translate}}</label>
            <div class="col-md-6">
                <input class="form-control" type="text" id="name" name="name"
                       ng-model="newUser.name" ng-required="true" />
                <div class="help-block" ng-messages="form.name.$error" ng-if="!form.name.$pristine">
                    <div ng-messages-include="messages.html"></div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-3 col-md-6">
                <button type="submit" class="btn btn-primary btn-lg" ng-disabled="form.$invalid || form.$pending">  {{'ok'|translate}}  
                </button>           
                <button type="button" ng-click="cancel()" class="btn btn-default btn-lg">  {{'cancel'|translate}}  
                </button>
            </div>
        </div>
    </form>
</div>


